<template>
  <div class="ant">
    <MyDialog
      :show="isShow"
      customName="ant-info-dialog"
      dialogWidth="720px"
      @opened="opened"
      @beforeClose="beforeClose">
      <template #body>
        <div class="content">
          <div class="top">
            <div class="left">
              <div class="title">
                可信ID：<span id="labelId">{{ showAntInfoCon.LABEL_ID }}</span>
              </div>
              <ul class="hash-info">
                <li>
                  资产ID：<span id="assetId">
                    {{ showAntInfoCon.ASSET_ID }}</span
                  >
                </li>
                <li id="owner-li">
                  <span v-if="showAntInfoCon.OWNER">
                    资源拥有者：<span id="owner">{{ showAntInfoCon.OWNER }}</span>
                  </span>
                </li>
                <!-- <li id="labelStatus-li">状态：<span id="labelStatus"></span></li> -->
                <li>
                  流程：<span id="process">{{ showAntInfoCon.PROCESS }}</span>
                </li>
                <li>
                  行为：<span id="action">{{ showAntInfoCon.ACTION }}</span>
                </li>
                <li>
                  操作人：<span id="operator">{{
                    showAntInfoCon.OPERATOR
                  }}</span>
                </li>
                <li>
                  操作时间：<span id="operatorTime">{{
                    showAntInfoCon.OPERATE_TIME
                  }}</span>
                </li>
                <!-- <li id="fileHash-li" style="width: 100%">
                  文件Hash：<span id="fileHash">{{showAntInfo.txHash}}</span>
                </li> -->
                <li style="width: 100%">
                  设备ID：<span id="deviceId">{{
                    showAntInfoCon.DEVICE_ID
                  }}</span>
                </li>
              </ul>
            </div>
            <div class="right">
              <div id="chain-qrcode" ref="qrCodeUrl"></div>
              <!-- <canvas></canvas> -->
            </div>
          </div>

          <div class="bottom">
            <div class="title">所在区块信息</div>
            <ul class="hash-info">
              <li>
                区块高度：<span id="blockNumber">{{
                  showAntInfo.blockNumber
                }}</span>
              </li>
              <li>
                上链时间戳：<span id="txTime">{{ showAntInfo.txTime }}</span>
              </li>
            </ul>
            <div class="clearfix clear"></div>
            <div class="chainId">
              区块Hash：<span id="blockHash">{{ showAntInfo.blockHash }}</span>
            </div>
          </div>
        </div>
        <!-- <div class="blockChain-title">
                    所在区块信息</div>
                <ul class="block-info">
                    <li>区块高度：<span id="blockNumber"></span></li>
                    <li>上链时间戳：<span id="txTime"></span></li>
                </ul>
                <div class="clearfix clear"></div>
                <div class="chainId">区块Hash：<span id="blockHash"></span></div>
            </div>
        </div> -->
      </template>
      <div slot="title">
        <div class="dialog-title">蚂蚁链信息</div>
      </div>
      <div slot="footer">
        <span> </span>
      </div>
    </MyDialog>
  </div>
</template>

<script>
import { lookAntChainInfo } from "@/api/access-manage/index";
import QRCode from "qrcodejs2";

export default {
  name: "AntInfo",
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
    currentInfo: {
      type: Object,
      default: () => {},
    },
  },
  components: {},
  watch: {
    isShow() {
      if (this.isShow) {
        this.getAntInfo();
      } else {
        this.newQrCode && this.newQrCode.clear();
      }
    },
  },
  data() {
    return {
      showAntInfo: {},
      showAntInfoCon: {},
      newQrCode: null,

      applyForm: {},
      rulesForm: {},
    };
  },

  methods: {
    // 获得当前行为蚂蚁链信息
    getAntInfo() {
      const params = {
        contractMethod: "LABEL_DATA",
        businessId: this.currentInfo.businessId,
        // businessId: '162918591222003945'
      };

      new Promise(resolve => {
        lookAntChainInfo(params)
          .then(res => {
            console.log(JSON.parse(res.data.resData.queryResult), "哈哈哈");
            this.showAntInfo =
              res.data.resData.queryResult &&
              JSON.parse(res.data.resData.queryResult);
            this.showAntInfoCon = this.showAntInfo && this.showAntInfo.content;

            this.getCode();

            // this.showAntInfoCon.OPERATE_TIME = this.$moment(
            //   this.showAntInfoCon.OPERATE_TIME
            // ).format("YYYY-MM-DD HH:mm:ss");
            // this.showAntInfo.txTime = this.$moment(
            //   this.showAntInfoCon.txTime
            // ).format("YYYY-MM-DD HH:mm:ss");
          })
          .catch(err => {});
      });
    },

    // 生成二维码
    getCode() {
      this.newQrCode = new QRCode(this.$refs.qrCodeUrl, {
        render: "canvas",
        // text: "https://blog.csdn.net/weixin_42601136", // 需要转换为二维码的内容
        text:
          "https://render.antfin.com/p/s/miniapp-web/?type=trans&from=antcloud&bizid=421111ac&hash=" +
          this.showAntInfo.txHash,
        width: 120,
        height: 120,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
      let logo = new Image();
      logo.crossOrigin = "Anonymous";
      logo.src = require("@/assets/images/ant/ant.jpg"); // 填入你本地log图片
      // 生成log图
      logo.onload = () => {
        let container = this.$refs["qrCodeUrl"];
        // 获取页面上的div,可以使用document.querySelector()等等方法,不类推了
        // if (container.innerHTML != "") {
        //   // 获取页面div , 有则清空已存在的
        //   container.innerHTML = ""
        // }
        let qrImg = this.newQrCode._el.getElementsByTagName("img")[0]; // 获取二维码
        let canvas = this.newQrCode._el.getElementsByTagName("canvas")[0]; // 获取canvas

        let ctx = canvas.getContext("2d");
        ctx.drawImage(logo, 120 * 0.5 - 13, 120 * 0.5 - 13, 26, 26); // 写入log
        qrImg.src = canvas.toDataURL();
        container.appendChild(this.newQrCode._el);
      };
    },
    // dialog 打开之后的回调函数
    opened() {
      // this.getCode();
    },

    // 关闭调阅窗口
    beforeClose() {
      this.$emit("closeDialog");
    },
    // // 取消按钮 - 关闭表单
    // applyClose() {
    //   this.$emit("closeDialog");
    // },
  },
};
</script>

<style lang="scss" scoped>
.ant {
  .content {
    line-height: 25px;
    margin: 0 10px;
    .top {
      display: flex;
      justify-content: space-between;
      .right {
        margin: 0 10px 0 0;
      }
    }
  }
}
.hash-info {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  li {
    width: 50%;
  }
}
.title {
  font-weight: bold;
  margin: 10px 0;
}
#chain-qrcode {
  width: 120px;
  height: 120px;
}
</style>
